<template>
  <div class="search-page h100 flex flex-column">
    <div class="search-box">
      <van-search
        class="xlt-search"
        shape="round"
        background="transparent"
        placeholder="搜索：文章标题/疾病/关键词"
        v-model="keyword"
        @blur="searchSubmit"
      />
    </div>
    <div class="flex1 bg-white">
      <div class="search-log flex-1" v-if="searchLog.length">
        <div class="flex flex-center">
          <div class="flex1 search-log-title">
            历史搜索
          </div>
          <div class="search-log-icon iconfont iconshanchu" @click="clearSearchLog" />
        </div>

        <div class="mt5">
          <div
            class="xlt-tag"
            v-for="(item, index) in searchLog"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <router-link to="/choose-dept" class="xlt-tag other-dept">
        查看其他科室文章
      </router-link>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import storage from '@/utils/storage';
import { useCurrentDeptInfo } from '@/hooks/store';

export default {
  setup() {
    const keyword = ref('');

    const searchLog = ref([]);
    const router = useRouter();
    const currentDept = useCurrentDeptInfo();

    function searchSubmit() {
      if (!keyword.value) return;
      pushLog();
      // 跳转逻辑
      router.push(
        `/article?departmentId=${currentDept.value.departmentId}&keyWord=${keyword.value}`
      );
    }

    function pushLog() {
      if (!searchLog.value.includes(keyword.value)) {
        searchLog.value.unshift(keyword.value);
        if (searchLog.value.length) {
          searchLog.value.splice(10, 1);
        }
      }
    }

    function setSearchLog() {
      storage.set('searchLog', searchLog.value);
    }

    function clearSearchLog() {
      searchLog.value = [];
      storage.remove('searchLog');
    }

    watch(
      searchLog,
      () => {
        setSearchLog();
      },
      { deep: true }
    );

    return {
      keyword,
      searchLog,
      clearSearchLog,
      searchSubmit
    };
  }
};
</script>

<style lang="scss" scoped>
.search-box {
  padding: 20px 32px;
}

.search-log {
  padding: 32px;
  background: #fff;
  margin-bottom: 26px;

  &-title {
    font-size: 36px;
    font-weight: 500;
    color: #373d52;
  }

  &-icon {
    color: #a2a6b8;
  }
}

.xlt-tag {
  padding: 10px 30px;
  font-size: 30px;
  font-weight: 500;
  color: #373d52;
  border-radius: 100px;
  background: #eee;
  display: inline-block;
  margin-right: 24px;
}

.other-dept {
  background: #27cdc5;
  color: #fff;
  position: fixed;
  bottom: 70px;
  right: 72px;
}
</style>